<template>
  <div>
    <split-title>实时消息</split-title>
    <time-line :data-list="timeLineList">
      <template #default="{ data }">
        <div style="color: #ffffff">
          <p v-if="data.create_time" style="margin-right: 1em; opacity: 0.75">{{ data.create_time }}</p>
          <p style="margin-top: 0.5em; text-indent: 2em; line-height: 1.5">{{ data.content }}</p>
        </div>
      </template>
    </time-line>
  </div>
</template>

<script>
import TimeLine from '@gis/lib/components/time-line.vue';
import SplitTitle from '@gis/lib/components/splitter/split-title.vue';
import { getEventTimeLineInfo } from '@gis/lib/api';

export default {
  name: 'realtime-msg',
  components: { SplitTitle, TimeLine },
  props: {
    data: { type: Object, default: () => ({}) },
  },
  data() {
    return {
      timeLineList: [],
    };
  },
  methods: {
    async getTimeLineDataAsync() {
      clearTimeout(this.pollingTimer);
      const { id } = this.data || {};
      this.timeLineList = this.handleCommonResult(await getEventTimeLineInfo({ event_id: id }).catch(() => {}));
      this.pollingTimer = setTimeout(() => this.getTimeLineDataAsync(), 10 * 1000);
    },
  },
  created() {
    this.getTimeLineDataAsync();
  },
  unmounted() {
    clearTimeout(this.pollingTimer);
  },
  beforeDestroy() {
    clearTimeout(this.pollingTimer);
  },
};
</script>

<style scoped></style>
